import Ledger from '../index'
import './index.less'
import { Form, DatePicker, Table, Select, Typography } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import { ColumnsType } from 'antd/es/table';
import { useEffect, useState } from 'react';
import { getDetail } from '../../../../services/statement/index'
const { Text } = Typography;
interface DataType {
  key: string;
  journalId: 2,
  subName: string,
  certificateNumberName: string,
  certificateDate: string,
  journalSummary: string,
  creditAmount: number,
  debitAmount: number,
  balance: number,
  balanceDirection: number
}
const columns: ColumnsType<DataType> = [
  {
    title: '科目名称',
    dataIndex: 'subName',
    key: 'subName',
    align: 'center'
  },
  {
    title: '日期',
    dataIndex: 'acertificateDatege',
    key: 'certificateDate',
    align: 'center'

  },
  {
    title: '凭证',
    dataIndex: 'certificateNumberName',
    key: 'certificateNumberName',
    align: 'center',
    // render: (text, record) => {
    //   if (record.key !== '1' && record.key !== '4' && record.key !== '5') {
    //     return (
    //       <a href=''>记</a>
    //     )
    //   }
    // }
  },
  {
    title: '摘要',
    dataIndex: 'journalSummary',
    key: 'journalSummary',
    render: (text, record) => {
      console.log(record);
      let style = {};
      if (record.key === '1' || record.key === '4' || record.key === '5') {
        style = { fontWeight: 'bold' };
      }
      return (
        <div>
          <span style={style}>{text}</span>
        </div>
      )
    },
    align: 'center'
  },
  {
    title: '借方',
    dataIndex: 'creditAmount',
    key: 'creditAmount',
    align: 'center'
  },
  {
    title: '贷方',
    dataIndex: 'debitAmount',
    key: 'debitAmount',
    align: 'center'

  },
  {
    title: '余额',
    dataIndex: 'balance',
    key: 'balance',
    align: 'center',
    render: (text) => {
      return (
        <div>
        </div>
      )
    }
  },
  {
    title: '方向',
    dataIndex: 'balanceDirection',
    key: 'balanceDirection',
    align: 'center'
  },
];
function FinancialG() {
  const [data, setData] = useState([]);
  //表格数据渲染
  useEffect(() => {
    getDetailData()
  }, [])
  const getDetailData = () => {
    getDetail({
      endDate: "2023-09-13T08:11:46.221Z",
      pageNo: 1,
      pageSize: 5,
      startDate: "2023-09-13T08:11:46.221Z",
      subId: 1
    }).then((res) => {
      console.log(res.data.list);
      let _data = res.data.list.map((v: any) => {
        return { ...v }
      })
      setData(_data)
    })
  }
  const [selectedValue, setSelectedValue] = useState('male');
  const { RangePicker } = DatePicker;
  const { Option } = Select;

  const onFinish = (values: any) => {
    console.log(values);
  };
  const onChange = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
  };
  //选择框
  const options = [
    { value: 'male', sel: 'Male' },
    { value: 'female', sel: 'Female' },
    { value: 'other', sel: 'Other' },
  ];
  return (
    <div className='finall'>
      <Ledger header='财务总账'></Ledger>
      <div className='center'>
        <Form
          name="customized_form_controls"
          layout="inline"
          onFinish={onFinish}
        >
          <Form.Item
            label="记账时间："
            name="date"
            style={{ marginLeft: '60px' }}
          >
            <RangePicker style={{ maxWidth: 215 }} />
          </Form.Item>
          <Form.Item
            label="科目："
            name="subone"
          >
            <Select
              placeholder="科目筛选"
              allowClear
              style={{ width: 140 }}
            >
              <Option value="male">male</Option>
              <Option value="female">female</Option>
              <Option value="other">other</Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="至"
            name="subtwo"
          >
            <Select
              placeholder="科目筛选"
              allowClear
              style={{ width: 140 }}
            >
              <Option value="male">male</Option>
              <Option value="female">female</Option>
              <Option value="other">other</Option>
            </Select>
          </Form.Item>
          <button style={{ width: '60px', height: '35px', border: 'none', background: '#22AB82', color: 'white' }} onClick={onFinish}>搜素</button>
        </Form>
        <Form>
          <button style={{ width: '60px', height: '35px', marginRight: 20, border: 'none', background: '#22AB82', color: 'white' }}>导出</button>
          <button style={{ width: '60px', height: '35px', border: 'none', background: '#22AB82', color: 'white' }}>打印</button>
        </Form>
      </div>
      <Table columns={columns} dataSource={data} style={{ marginLeft: '60px' }} bordered
        summary={(data) => {
          let ages = 0;
          let addresss = 0;
          data.forEach(({ }) => {
              // console.log(age, 111);
              // if (age != null && address != null) {
              //     addresss+=address
              //     ages += age
              // }
              console.log(ages, 11);
          })
          return (<>
            <Table.Summary.Row>
              <Table.Summary.Cell colSpan={1} index={0} className="total-cell" />
              <Table.Summary.Cell index={1} colSpan={1}>
                {/* <Text>{ages}</Text> */}
              </Table.Summary.Cell>
              <Table.Summary.Cell colSpan={1} index={1}>
                {/* <Text>{ages}</Text> */}
              </Table.Summary.Cell>
              <Table.Summary.Cell colSpan={1} index={1} className='totaltable'>
                本年累计
              </Table.Summary.Cell>
              <Table.Summary.Cell colSpan={1} index={1}>
              </Table.Summary.Cell>
              <Table.Summary.Cell colSpan={1} index={1}>
                {/* <Text>{addresss}</Text> */}
              </Table.Summary.Cell>
              <Table.Summary.Cell colSpan={1} index={1}>
                {/* <Text>{addresss}</Text> */}
              </Table.Summary.Cell>
              <Table.Summary.Cell colSpan={1} index={1}>
              </Table.Summary.Cell>
            </Table.Summary.Row>
          </>

          )
        }}
      />
      <span className='footer'>当前合计，共3条记录</span>
    </div>
  )
}
export default FinancialG